{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>浏览数据</title>
    <link rel="stylesheet" href="{% static 'pear_layui/component/layui/css/layui.css' %}" media="all">
    <link rel="stylesheet" href="{% static 'css/loading/animate.css' %}">
    <link rel="stylesheet" href="{% static 'css/loading/global.css' %}">
    <link rel="stylesheet" href="{% static 'css/loading/loading.css' %}">
</head>
<style>
    body,html{
		height: 100%;
		justify-content: center;
		align-items: center;
	}
</style>
<body>

<table id="demo" lay-filter="test"></table>
</body>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'pear_layui/component/layui/layui.js' %}"></script>
<script src="{% static 'js/loading.js' %}" type="text/javascript" charset="utf-8"></script>
<script>
    function loading3() {
        $('body').loading({
            loadingWidth: 120,
            title: '',
            name: 'test',
            discription: '加载中...',
            direction: 'column',
            type: 'origin',
            originDivWidth: 40,
            originDivHeight: 40,
            originWidth: 6,
            originHeight: 6,
            smallLoading: false,
            loadingMaskBg: 'rgba(0,0,0,0.2)'
        });
    }

    loading3();


    var temp = "{{ cols }}".replace(/&#x27;/g, '"').replace('[[', '').replace(']]', '').replace(/},/g, '}$').replace(/\s+/g, '');
    temp_list = temp.split('$');
    // 定义临时空数组
    var empty_list = [];
    for (let i = 0; i < temp_list.length; i++) {
        empty_list.push(JSON.parse(temp_list[i]))
    }
    $.ajax({
        url: "{% url 'app-cube-browser-data' %}",
        method: 'post',
        data: {"table_name": "{{ table_name }}", 'csrfmiddlewaretoken': '{{ csrf_token }}'},
        success: function (r) {
            removeLoading('test');
            layui.use('table', function () {
                var table = layui.table;
                //第一个实例
                table.render({
                    elem: '#demo'
                    , data: r.data
                    , page: true //开启分页
                    , cols: [empty_list]
                    , limit: 15
                });
            });
        }
    });
</script>
</html>